import { defineComponent, ref, watch, type PropType } from 'vue'
import homeIcons from '../../assets'

interface IStyle {
  backgroundColor?: string // 内容框填充色
}

export default defineComponent({
  props: {
    text: {
      type: Object as PropType<IStyle>
    },
    // 展开图标样式
    type: {
      type: Number
    },
    // 是否显示展开图标
    showExpand: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const containText = ref<IStyle>({
      backgroundColor: 'white'
    })
    watch(
      props,
      () => {
        containText.value = Object.assign(containText.value, props.text)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <>
        <div class="px-3 mx-4 rounded-bl-lg rounded-br-lg" style={containText.value}>
          <p class="pt-3 mb-0 text-xs text-[#48494d] leading-6">
            我不要做刀，我要做执刀人。
            <br />
            我不要做棋子，我要成为弈棋者。
            <br />
            一个平凡人。
            <br />
            却偏要在这世界上活出自己…
          </p>
          <div
            class="border-0 h-10 leading-9 text-xs text-[#8f9299] bg-white text-center w-full"
            v-show={props.type === 1 && props.showExpand}
          >
            <img src={homeIcons.expand2} alt="" class="w-4 h-4 relative bottom-0.5" />
          </div>
          <div
            class="border-0 h-10 leading-9 text-xs text-[#8f9299] bg-white text-center w-full"
            v-show={props.type === 2 && props.showExpand}
          >
            更多 <img src={homeIcons.expand1} alt="" class="w-4 h-4 relative bottom-0.5" />
          </div>
        </div>
      </>
    )
  }
})
